<template>
  <div>
    <div style="margin: 15px">
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品组</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <div class="herder">
        <div class="input">
          <span>产品名称:</span>
          <el-input v-model="input" placeholder="输入品牌名称"></el-input>
          <el-button type="primary" size="mini" @click="Search" icon="el-icon-search">查询</el-button>
        </div>
      </div>
      <div class="box_button">
        <div class="button">
          <p>
            <el-button @click="add" type="success" size="small" icon="el-icon-plus">添加商品</el-button>
            <el-button type="del" clearSelection="delet" @click="remove" size="small" icon="el-icon-delete">删除商品</el-button>
          </p>
        </div>
        <div class="form">
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="日期" prop="Commodity_group" width="160">
              <template slot-scope="scope">{{ scope.row.Commodity_group }}</template>
            </el-table-column>
            <el-table-column label="" width="360"> </el-table-column>
            <el-table-column prop="state" label="姓名" width="120">
              <template v-slot="{ row }">
                <div v-if="row.state == 0">显示</div>
                <div v-else>隐藏</div>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="地址" show-overflow-tooltip>
              <template v-slot="{ row }">
                <el-button v-if="row.state == 1" @click="up(row)" size="mini">上架</el-button>
                <el-button v-else @click="sold_out(row)" type="right" size="mini" icon="el-icon-check"></el-button>
                <el-button @click="compile(row.id)" type="primary" size="mini" icon="el-icon-edit"></el-button>
                <el-button @click="del(row.id)" type="danger" size="mini" icon="el-icon-delete"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { deletemultiple } from '../../../utils/index'
import { lwjcommodiygroup, lwjcommodiygroup_del, commodiygroup_put_one } from '../../../api/index'
// import router from '../../../router'
export default {
  data() {
    return {
      input: '',
      arr: [],
      tableData: [],
      multipleSelection: [],
    }
  },
  methods: {
    remove() {
      deletemultiple('/api/commodiygroup_del', this.multipleSelection)
    },
    up(row) {
      console.log(row)
      const arr = {
        id: row.id,
        state: (row.state = 0),
      }
      commodiygroup_put_one(arr).then((res) => {
        console.log(res)
      })
    },
    sold_out(row) {
      console.log(row)
      const arr = {
        id: row.id,
        state: (row.state = 1),
      }
      commodiygroup_put_one(arr).then((res) => {
        console.log(res)
      })
    },
    get() {
      lwjcommodiygroup().then((res) => {
        console.log(res)
        this.tableData = res.data
      })
    },
    Search() {
      this.tableData = this.tableData.filter((item) => {
        return item.Commodity_group.indexOf(this.input) > -1
      })
    },
    compile(row) {
      console.log(row)
      this.$router.push(`/groupdata/${row}`)
    },
    del(id) {
      console.log(id)
      lwjcommodiygroup_del({ id: id }).then((res) => {
        console.log(res)
        this.get()
      })
    },
    add() {
      this.$router.push('/groupadd')
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.id)
      console.log(this.multipleSelection)
    },
  },
  created() {
    this.get()
    this.get()
  },
}
</script>
<style lang="scss" scoped>
.el-button--success {
  background: #ff9800;
  color: white;
}

.el-button--del {
  background: #ff5157;
  color: white;
}

::v-deep .el-input__inner {
  width: 200px;
  height: 30px;
}

::v-deep .el-input {
  width: 200px;
  height: 30px;
}

.box {
  width: 100%;
  height: 800px;
  // border: 1px solid #FF5157;
}

.herder {
  width: 100%;
  height: 40px;
  // border: 1px red solid;

  .input {
    padding: 0 0 0 20px;
    display: flex;
    width: 400px;
    font-size: 14px;
    height: 30px;
    justify-content: space-evenly;
    align-items: center;
  }
}

.button {
  width: 95%;
  height: 30px;
  display: flex;
  margin: 20px 0 30px 0px;
  padding: 20px 0px 20px 40px;
  align-items: center;
  border: 1px #eaeaea solid;
}

.form {
  width: 80%;
  padding: 0 0 0 40px;
}

::v-deep .cell {
  text-align: center;
}
</style>
